<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
</head>

<body>
  <div id="app">
    <router-view></router-view>
  </div>
  <script>
    const List = {
      template: `
        <ul>
          文章列表页
          <li v-for="item in list" @click="goDetail(item.id)">{{item.name}}</li>
        </ul>
      `,
      data() {
        return {
          list: [
            { id: 1001, name: '文章1001' }, 
            { id: 1002, name: '文章1002' },
            { id: 1003, name: '文章1003' }
          ]
        }
      },
      methods: {
        goDetail(id) {
          this.$router.push({
            path: '/detail',
            query: {
              id
            }
          })
        }
      }
    }
    const Detail = {
      template: `
        <div>
          文章详情页 <br>
          当前文章id为 {{$route.query.id}}
        </div>
      `
    }
    const routes = [
      { path: '/list', component: List, name: 'list' },
      { path: '/detail', component: Detail, name: 'detail' }
    ]
    const router = new VueRouter({
      routes
    })

    const vm = new Vue({
      el:'#app',
      router
    })
  </script>
</body>

</html>